<template>
  <div>
    <el-drawer
      :visible.sync="showDrawer"
      :show-close="false"
      destroy-on-close
      append-to-body
      wrapperClosable
      @close="handleClose"
      :withHeader="false"
      size="60%"
    >
      <div class="container" v-loading="loading">
        <div class="exam_content">
          <!--   题目列表   -->
          <div class="answer_sheet" v-if="showSheet">
            <div class="answer_sheet_title">
              <span>题目列表</span>
              <i
                @click="showSheet = false"
                class="el-icon-s-operation color_aqua"
              ></i>
            </div>
            <div class="sheet_question_list">
              <div
                v-for="(item, index) in formatObj.examPaperTitleList"
                :key="index"
              >
                <a
                  @click="scrollToAnchor(item.titleId)"
                  class="sheet_question_item"
                  >{{ item.title }}
                  <span class="paperTitle ml10">共{{ item.topicNum }}题</span>
                </a>
                <!--     题目列表卡片       -->
                <div class="sheet_answer_collect">
                  <div
                    v-for="(childItem, childIndex) in item.topicList"
                    :key="childIndex"
                  >
                    <div
                      @click="scrollToAnchor(childItem.id)"
                      class="sheet_answer_collect_item"
                    >
                      {{ childItem.sort }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--   main-top内容  答题   -->
          <div class="exam_content_top">
            <div class="title flex">
              {{ formatObj.title }}
              <div
                v-if="previewType == 'paper'"
                style="
                  font-size: 16px;
                  font-weight: 500;
                  color: #333333;
                  margin: 3px 0 0 20px;
                "
              >
                总分:{{ formatObj.totalScore ? formatObj.totalScore : 0 }}分
                <span style="margin: 0 5px">|</span> 及格分数:{{
                  formatObj.passingGrade ? formatObj.passingGrade : 0
                }}分
              </div>
            </div>
            <i @click="showSheet = true" class="el-icon-s-operation"></i>
          </div>
          <div class="all_exam_connect">
            <!--   main-connect内容   -->
            <div
              class="exam_list"
              v-for="(item, index) in formatObj.examPaperTitleList"
              :key="index"
            >
              <div
                v-if="previewType == 'paper'"
                :id="item.titleId"
                class="paperTitle_left"
              >
                {{ item.title
                }}<span class="paperTitle"
                  >(共{{ item.topicNum }}题，{{ item.score }}分)</span
                >
              </div>
              <div
                class="answer_question"
                v-for="(childItem, childIndex) in item.topicList"
                :key="childIndex"
              >
                <span :id="childItem.id">{{ childItem.sort }}</span
                >.
                <span class="question_type">
                  {{ topicType[childItem.topicType] }} </span
                >&nbsp;
                <span>
                  <span
                    style="white-space: pre-wrap"
                    class="questionTitle"
                    v-html="childItem.topicContent || childItem.content"
                  ></span>
                  ({{ topicType[childItem.topicType] }},{{ childItem.score }}分)
                </span>
                <div v-if="childItem.topicPic" class="topic_image">
                  <el-image
                    v-for="(
                      topicPicitem, topicPicindex
                    ) in childItem.topicPic.split(',')"
                    style="
                      width: auto !important;
                      height: 100px;
                      margin-right: 10px;
                      margin-bottom: 10px;
                    "
                    :src="topicPicitem"
                    :key="topicPicindex"
                    :preview-src-list="childItem.topicPic.split(',')"
                  >
                  </el-image>
                </div>
                <div class="item_answer">
                  <!--    填空题部分        -->
                  <div v-if="childItem.topicType == 3">
                    <div
                      class="optionItem"
                      v-for="(
                        optionItem, optionIndex
                      ) in childItem.topicOptionList"
                      :key="optionIndex"
                    >
                      <span class="optionItem_label"
                        >{{ optionIndex + 1 }}.</span
                      >

                      <el-input
                        v-model="optionItem.optionValue"
                        disabled
                        clearable
                        class="optionItem_answer"
                        type="text"
                        placeholder="请输入答案"
                      >
                      </el-input>
                    </div>
                  
                  </div>
                  <!--    单选题部分        -->
                  <el-radio-group
                    disabled
                    v-if="childItem.topicType == 0"
                    v-model="childItem.userAnswer"
                  >
                    <el-radio
                      v-for="(
                        answerItem, answerIndex
                      ) in childItem.topicOptionList"
                      :key="answerIndex"
                      :label="answerItem.label || answerItem.optionLabel"
                    >
                      {{ answerItem.label || answerItem.optionLabel }}、{{
                        answerItem.optionValue
                      }}
                    </el-radio>
                  </el-radio-group>
                  <!--    多选题部分        -->
                  <el-checkbox-group
                    disabled
                    v-if="childItem.topicType == 1"
                    v-model="childItem.multiAnswers"
                  >
                    <el-checkbox
                      v-for="(
                        answerItem, answerIndex
                      ) in childItem.topicOptionList"
                      :key="answerIndex"
                      :label="answerItem.label || answerItem.optionLabel"
                    >
                      {{ answerItem.label || answerItem.optionLabel }}、{{
                        answerItem.optionValue
                      }}
                    </el-checkbox>
                  </el-checkbox-group>
                  <!--    判断题部分        -->
                  <el-radio-group
                    disabled
                    v-if="childItem.topicType == 2"
                    v-model="childItem.userAnswer"
                  >
                    <el-radio :label="'正确'">对</el-radio>
                    <el-radio :label="'错误'">错</el-radio>
                  </el-radio-group>
                  <!--      简答题部分      -->
                  <el-input
                    disabled
                    v-if="childItem.topicType == 4 || childItem.topicType == 5"
                    class="textarea"
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 4 }"
                    placeholder="请输入答案"
                    v-model="childItem.userAnswer"
                  >
                  </el-input>
                  <!--  附件    -->
                  <div
                    class="attachment"
                    v-if="
                      (childItem.topicType == 4 || childItem.topicType == 5) &&
                      previewType == 'paper'
                    "
                  >
                    <div style="width: 50px">附图</div>
                    <div class="pictures">
                      <!--     做题状态可点击上传        -->
                      <div class="upload_new">
                        <i class="el-icon-plus"></i>
                        <div class="upload_txt">上传文件</div>
                      </div>
                      <div class="attachment_sugest">
                        照片和文件大小不可超过20MB，视频大小不可超过300M
                      </div>
                    </div>
                  </div>
                  <!--     试题解析 只有批改过的详情和老师批改能看      -->
                  <div class="resolve_exam">
                    <div
                      class="resolve_exam_label"
                      v-if="childItem.resolve || childItem.resolvePic"
                    >
                      试题解析：
                    </div>
                    <div class="resolve_exam_value" v-if="childItem.resolve">
                      {{ childItem.resolve }}
                    </div>

                    <div
                      style="
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                      "
                      v-if="childItem.resolvePic"
                    >
                      <el-image
                        v-for="(item3, index3) in childItem.resolvePic.split(
                          ','
                        )"
                        style="
                          width: auto !important;
                          height: 100px;
                          margin-left: 10px;
                          margin-bottom: 10px;
                        "
                        :src="item3"
                        :key="index3"
                        :preview-src-list="childItem.resolvePic.split(',')"
                      >
                      </el-image>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { previewExamPaper } from "@/api/exam/paper";

export default {
  components: {},
  name: "examPreview",

  data() {
    return {
      previewType: "paper", //还有一种是题目预览 topic
      loading: true,
      // 考试id
      examId: "",
      // 考试类型
      examType: "",
      // 抽屉
      showDrawer: false,
      // 抽屉标题
      titleName: "",
      // 考试详情
      formatObj: { examPaperTitleList: [] },
      // 试卷列表
      showSheet: false,
      // 题型
      topicType: {
        0: "单选题 ",
        1: "多选题 ",
        2: "判断题",
        3: "填空题",
        4: "简答题",
        5: "操作题",
      },
    };
  },
  mounted() {},
  methods: {
    // 获取考试详情
    async getexamList() {
      let res = await previewExamPaper(this.examId);
      for (let i = 0; i < res.data.examPaperTitleList.length; i++) {
        for (
          let j = 0;
          j < res.data.examPaperTitleList[i].topicList.length;
          j++
        ) {
          let topic = res.data.examPaperTitleList[i].topicList[j];
          if (topic.topicType == 0) {
            for (let m = 0; m < topic.topicOptionList.length; m++) {
              if (topic.topicOptionList[m].right) {
                topic.userAnswer = topic.topicOptionList[m].label;
              }
            }
          }
          if (topic.topicType == 2) {
            for (let m = 0; m < topic.topicOptionList.length; m++) {
              if (topic.topicOptionList[m].right) {
                topic.userAnswer = topic.topicOptionList[m].optionValue;
              }
            }
          }
          if (topic.topicType == 1) {
            topic.multiAnswers = [];
            for (let m = 0; m < topic.topicOptionList.length; m++) {
              if (topic.topicOptionList[m].right) {
                topic.multiAnswers.push(topic.topicOptionList[m].label);
              }
            }
          }
        }
      }
      this.formatObj = res.data;
      this.loading = false;
    },
    //打开抽屉
    show(examType, id, previewType, list) {
      this.showDrawer = true;
      this.examType = examType;
      this.examId = id;
      this.previewType = previewType;
      this.titleName = examType == 1 ? "考核" : examType == 2 ? "练习" : "抽查";
      if (previewType == "paper") {
        this.getexamList();
      } else {
        this.formatObj.title = "题库预览";
        list.map((item, index) => {
          item.sort = index + 1;
          item.topicOptionList = item.ccTopicOptionList;
          item.topicPic = item.contentPic;

          if (item.topicType == 0) {
            for (let m = 0; m < item.ccTopicOptionList.length; m++) {
              if (item.ccTopicOptionList[m].trueOption) {
                item.userAnswer = item.ccTopicOptionList[m].optionLabel;
              }
            }
          }
          if (item.topicType == 2) {
            for (let m = 0; m < item.ccTopicOptionList.length; m++) {
              if (item.ccTopicOptionList[m].trueOption) {
                item.userAnswer = item.ccTopicOptionList[m].optionValue;
              }
            }
          }
          if (item.topicType == 1) {
            item.multiAnswers = [];
            for (let m = 0; m < item.ccTopicOptionList.length; m++) {
              if (item.ccTopicOptionList[m].trueOption) {
                item.multiAnswers.push(item.ccTopicOptionList[m].optionLabel);
              }
            }
          }
          if (item.type == 3) {
            item.topicOptionList = item.ccTopicOptionList;
          }
        });
        console.log("list", list);
        this.formatObj.examPaperTitleList = [
          { topicList: list, topicNum: list.length },
        ];
        console.log(this.formatObj.examPaperTitleList[0]);
        this.loading = false;
      }
    },
    //关闭抽屉
    handleClose() {
      this.showDrawer = false;
      this.formatObj = {};
      this.showSheet = false;
      this.loading = true;
    },
    //锚点跳转
    scrollToAnchor(id) {
      const anchor = document.getElementById(id);
      if (anchor) {
        anchor.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.resolve_exam_value {
  margin: 10px 0;
  word-break: break-all;
  display: block;
  max-width: 600px !important;
  background-color: #e7f6f3;
  border-color: #cfeee6;
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  color: #11a983;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
}
.resolve_exam_label {
  width: 90px !important;
}
.container {
  .exam_content {
    width: 100%;
    border-radius: 16px;
    background: #ffffff;
    position: relative;

    .answer_sheet {
      width: 344px;
      box-shadow: 0 6px 14px 0 rgba(0, 55, 49, 0.1);
      border-radius: 0 16px 0 0;
      background: white;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;

      &_title {
        display: flex;
        justify-content: space-between;
        padding: 24px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f3f4;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .sheet_question_list {
        height: 60vh;
        overflow: auto;
        padding: 32px 24px;
        box-sizing: border-box;
        background: white;

        .sheet_question_item {
          display: inline-block;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 12px;
        }

        .sheet_answer_collect {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 12px;

          &_item {
            user-select: none;
            margin: 0 10px 10px 0;
            width: 36px;
            height: 36px;
            background: #ffffff;
            color: #999999;
            border-radius: 50%;
            border: 1px solid #28b28b;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }
        }
      }
    }

    &_top {
      border-radius: 16px 16px 0 0;
      border-bottom: 1px solid #f1f3f3;
      padding: 24px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .el-icon-s-operation {
        font-size: 18px;
        color: #727272;
        cursor: pointer;
      }

      .middle {
        display: flex;
        align-items: center;

        .progress {
          width: 120px;
          margin-left: 16px;
        }
      }
    }

    .all_exam_connect {
      width: 100%;
      height: calc(100vh - 84px);
      overflow: auto;

      .exam_list {
        width: 100%;
        padding: 32px 64px;
        background: white;
        box-sizing: border-box;

        .paperTitle_left {
          font-size: 16px;
          font-weight: 500;
          color: #000000;
          margin-bottom: 16px;

          .paperTitle {
            font-size: 14px;
            font-weight: 500;
            color: #949494;
          }
        }

        .answer_question {
          font-size: 14px;
          font-weight: 400;
          color: #333333;

          .item_answer {
            width: 100%;
            margin: 21px 0 41px;

            .textarea {
              width: 60%;
              font-size: 16px;
            }

            .attachment {
              width: 100%;
              padding: 25px 0 0;
              box-sizing: border-box;
              display: flex;

              &_sugest {
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                margin-top: 16px;
              }

              .pictures {
                margin-left: 10px;
              }
            }
          }

          .question_type {
            color: #ef7d00;
          }
        }
      }
    }
  }
}

.optionItem {
  display: flex;
  align-items: center;
  margin: 10px 0;

  &_label {
    font-size: 14px;
    font-weight: 400;
    color: #a0a09f;
  }

  &_answer {
    width: 256px;
    margin-left: 11px;
  }
}

.resolve_exam {
  margin-top: 10px;

  &_label {
    color: #333333;
    font-weight: bold;
  }

  &_value {
    color: #333333;
  }
}

.topic_image {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
}

.upload_new {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: not-allowed;
  margin-right: 12px;

  .el-icon-plus {
    font-size: 18px;
    font-weight: bold;
    color: #999999;
    font-style: normal;
  }

  .upload_txt {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    user-select: none;
  }
}

/* 修改滚动条样式 .title_state为div盒子*/
.sheet_question_list::-webkit-scrollbar {
  width: 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.sheet_question_list::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 4px;
}

.sheet_question_list::-webkit-scrollbar-track {
  background: white;
}

/* 修改滚动条样式 .title_state为div盒子*/
.all_exam_connect::-webkit-scrollbar {
  width: 6px;
  overflow-y: scroll;
  overflow-x: auto;
}

.all_exam_connect::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 4px;
}

.all_exam_connect::-webkit-scrollbar-track {
  background: white;
}

.color_aqua {
  color: #09c1ae !important;
  cursor: pointer;
}

//checkBox自定义禁用样式
//::v-deep .el-checkbox__input.is-disabled + .el-checkbox__label {
//  color: #808080 !important;
//}
//
//::v-deep .el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
//  color: #1890ff !important;
//}
//
//::v-deep .el-checkbox__input .is-disabled .el-checkbox__inner {
//  background-color: #1890ff !important;
//  border-color: #1890ff !important;
//}
</style>

